<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">vuex讲解</router-link>|
       <router-link to="/cart">pinia</router-link>|
   <router-link to="/box">一些api</router-link>|
   <router-link to="/game">defineModel</router-link>
  </div>
  <!--  keep-alive 俩个属性  exclude include -->
    <!-- vue 3 的keepalive改变 -->

    
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    
    

</template>
<script setup>

</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
